﻿<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>
    <script type="text/javascript" src="/Utilities/webdesk/webdesk.ui.core.js"></script>
    <script type="text/javascript" src="/Utilities/webdesk/Scripts/ctrls.js"></script>
    <script type="text/javascript" src="/Utilities/webdesk/Scripts/login.js"></script>
    <link rel="stylesheet" type="text/css" href="/Utilities/webdesk/Skins/win10/login.css" />
    <style type="text/css">
        html,
        body {
            overflow: hidden;
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
        }
        
        h1 {
            font-size: 25px;
            color: #333;
            margin: 0px;
            font-weight: 900;
            white-space: nowrap;
            text-shadow: .2rem 0rem 1.2rem rgba(255, 255, 255, 1), -.2rem 0rem 1.2rem rgba(255, 255, 255, 1), 0rem .2rem 1.2rem rgba(255, 255, 255, 1), 0rem -.2rem 1.2rem rgba(255, 255, 255, 1);
        }
        
        h1 span {
            font-size: 15px;
            margin-left: 20px;
        }
        
        h1 b:before {
            content: "\a035";
            font-size: 30px;
            line-height: 40px;
            margin-right: 10px;
        }
        
        a.home {
            display: block;
            width: 120px;
            height: 40px;
            line-height: 40px;
            float: right;
            font-size: 14px;
            text-align: center;
            color: #333;
            text-decoration: none;
            font-weight: normal;
        }
        
        a.home:before {
            content: "\a020";
            font-size: 18px;
            line-height: 40px;
            margin-right: 2px;
            font-family: "webdesk_icon" !important;
        }
        
        a {
            color: #000;
        }
        
        p {
            font-size: 15px;
            margin: 0px;
            padding: 0px;
            line-height: 25px;
        }
        
        table {
            background-color: #ccc;
            width: calc(100% - 20px);
        }
        
        table td {
            background-color: #fff;
        }
        
        th,
        td {
            height: 25px;
            line-height: 25px;
        }
        
        td {
            padding: 0px 10px 0px 10px;
        }
        
        table tr td:first-child {
            text-align: center;
            padding: 0px;
        }
        
        table#eventTable tr td:first-child:before {
            content: 'on'
        }
    </style>
</head>

<body oncontextmenu='return false'>
    <div style="height: 40px; padding-left: 20px;">
        <h1><b class="webdesk_icon"></b>Login.js 登录框 <span>（手式滑块，验证码加载）</span><a class='home' href="/">返回首页</a>
        </h1>
    </div>

    <div id="login-area" style="width: 280px; height: 320px;position: absolute;z-index: 100;right: 80px;top: 60px;">
    </div>

    <div class="intro-panel" style="margin: 50px;width: calc(100% - 100px);height: calc(100% - 100px);overflow: auto;position: absolute;top:10px">
        <ul>
            <li>支持手式滑动验证</li>
            <li>支持图片验证码，需要调用服务端</li>
        </ul>
        <div>
            <b>演示：</b>
            <div>
                <p>演示地址：<a href='http://webdesk.weisha100.cn/ctrls/login.html' target="_blank">http://webdesk.weisha100.cn/ctrls/login.html</a></p>
                <p>开源地址：<a href='https://github.com/weishakeji/WebdeskUI' target="_blank">https://github.com/weishakeji/WebdeskUI</a></p>
            </div>
            <b>示例：</b>
            <pre>
     var login = $login.create({
        target: '#login-area',
        //width: '500px',
        title: '管理系统登录',
        company: '微厦科技',
        website: 'http://www.weishakeji.net',
        tel: '400 6015615',
        
        //user: 'admin',
        //pw: '1'
    });
</pre>
            <b>属性:</b>
            <div>
                <p>下表中，“可监听”的属性，可以通过watch()增加监听方法，类似Vue；“双向绑定”的意思是属性更改后，直接影响窗体样式。</p>
            </div>
            <table width="100%" border="0" cellspacing="1" cellpadding="1">
                <tr>
                    <th scope="col" width="200px">属性</th>
                    <th scope="col">说明</th>
                    <th scope="col" width="60px">可监听</th>
                    <th scope="col" width="80px">双向绑定</th>
                </tr>
                <tr>
                    <td>target</td>
                    <td>对象所在的html位置</td>
                    <td>√ </td>
                    <td></td>
                </tr>
                <tr>
                    <td>width</td>
                    <td>宽度</td>
                        <td>√ </td>
                        <td>√ </td>
                </tr>
                <tr>
                    <td>height</td>
                    <td>高度</td>
                    <td>√ </td>
                    <td>√ </td>
                </tr>
                <tr>
                    <td>title</td>
                    <td>标题</td>
                    <td>√ </td>
                    <td>√ </td>
                </tr>
                <tr>
                    <td>ico</td>
                    <td>iconfont图标</td>
                    <td>√ </td>
                    <td>√ </td>
                </tr>
                <tr>
                    <td>icoimg</td>
                    <td>图片标志，设置后覆盖ico</td>
                    <td>√ </td>
                    <td>√ </td>
                </tr>
                <tr>
                    <td>loading</td>
                    <td>加载中，为true时显示加载效果</td>
                    <td>√ </td>
                    <td>√ </td>
                </tr>
            </table>
            <div>
                <b>方法：</b>
                <div>
                    <p>下表只列出了常用公共方法，更多方法请参看源码。</p>
                </div>
                <table width="100%" border="0" cellspacing="1" cellpadding="1">
                    <tr>
                        <th scope="col" width="100px">方法</th>
                        <th scope="col">说明</th>
                        <th scope="col">参数</th>
                    </tr>

                </table>
                <b>事件：</b>
                <div>
                    <p>事件支持多播，即同一个事件可以添加多个方法。事件返回值仅限bool型，虽然可以返回其它类型或不返回，但最终都会转为bool型返回值。</p>
                    <p>当同一个事件中的多个方法，任一个返回false，则不再继续执行后续事件方法。如果不返回，默认是true。</p>
                </div>
                <table id="eventTable" width="100%" border="0" cellspacing="1" cellpadding="1">
                    <tr>
                        <th scope="col" width="80px">事件</th>
                        <th scope="col" width="150px">说明</th>
                        <th scope="col" width="100px">参数sender</th>
                        <th scope="col">参数e</th>
                    </tr>
                    <tr>
                        <td>load</td>
                        <td>当布局完成</td>
                        <td>同上</td>
                        <td>e.event：事件名称<br> e.action：动作，默认与e.event同值
                            <br> e.target：响应事件的html元素，此处为窗体的html
                            <br> e.data：数据源
                        </td>
                    </tr>
                    <tr>
                        <td>resize</td>
                        <td>当宽高变动时</td>
                        <td>&nbsp;</td>
                        <td>e.width:当前宽高<br /> e.height:当前高度
                        </td>
                    </tr>
                    <tr>
                        <td>dragfinish</td>
                        <td>滑块拖动完成</td>
                        <td>&nbsp;</td>
                        <td>e.data，当前节点数据项</td>
                    </tr>
                    <tr>
                        <td>change</td>
                        <td>输入变动</td>
                        <td>&nbsp;</td>
                        <td>e.action：账号user,密码pw,验证码vcode<br /> e.word:当前输入内容
                            <br /> e.value:当前值
                            <br /> e.target:当前输入框对象
                        </td>
                    </tr>
                    <tr>
                        <td>submit</td>
                        <td>提交表单</td>
                        <td>&nbsp;</td>
                        <td>e.user:当前要提交的账号管<br /> e.pw:密码
                            <br /> e.vcode:验证码</td>
                    </tr>
                </table>
            </div>
        </div>
</body>
<script type="text/javascript">
    var login = $login.create({
        target: '#login-area',
        //width: '500px',
        title: '管理系统登录',
        company: '微厦科技',
        website: 'http://www.weishakeji.net',
        tel: '400 6015615',
        icoimg: '../admin/images/head1.jpg',
        //user: 'admin',
        //pw: '1'
    });
    //自定义验证
    login.verify([{
        'ctrl': 'user',
        'regex': /^[a-zA-Z0-9_-]{4,16}$/,
        'tips': '请用字符开头，长度不得小于4位大于16位'
    }, {
        ctrl: 'vcode',
        regex: /^\d{4}$/,
        tips: '请输入4位数字'
    }]);
    login.ondragfinish(function(s, e) {
        // body...
        console.log(e);
    });
    //提交表单的事件
    login.onsubmit(function(s, e) {
        //s.dragfinish = false;
        console.log('表单提交成功');

    });
    login.onchange(function(s, e) {
        //console.log(e);
        //console.log('输入框：' + e.action + ',输入：' + e.word + ',当前值：' + e.value);
    });
</script>

</html>